<template>
  <div class="hr-config-planning-container">
    <span class="print-btn">
      <!-- <router-link style="" to="/main/renshi/jiaqiguanli">返回</router-link> -->
      <el-button type="primary" @click="$router.push('/main/renshi/jiaqiguanli')" icon="el-icon-back">返回</el-button>
      <el-button type="info" icon="el-icon-printer" @click="printForm"
        >打印</el-button
      >
    </span>
    <div class="page">
      <h1 class="company-name">{{ company }}</h1>
      <h2 class="title">假期管理规定</h2>
      <div class="meta-info">
        <div @dblclick="editMeta = true">
          <p v-if="!editMeta" title="双击修改">
            文件编号：{{ meta.fileNumber }}
          </p>
          <input
            v-else
            v-model="meta.fileNumber"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true" title="双击修改">
          <p v-if="!editMeta">文件版本：{{ meta.version }}</p>
          <input
            v-else
            v-model="meta.version"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true" title="双击修改">
          <p v-if="!editMeta">编制部门：{{ meta.department }}</p>
          <input
            v-else
            v-model="meta.department"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
        <div @dblclick="editMeta = true" title="双击修改">
          <p v-if="!editMeta">生效日期：{{ meta.effectiveDate }}</p>
          <input
            v-else
            v-model="meta.effectiveDate"
            style="width: 100px"
            @blur="editMeta = false"
          />
        </div>
      </div>
      <div>
        <div
          style="
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            line-height: 30px;
          "
        >
          <div @dblclick="editApproval = true" title="双击修改">
            <label v-if="!editApproval"
              ><span>批准：{{ approvalPerson }}</span>
              <span
                >日期：{{ approvalDate.year }}年{{ approvalDate.month }}月{{
                  approvalDate.day
                }}日</span
              >
            </label>
            <label v-else>
              <span
                >批准：<input
                  type="text"
                  v-model="approvalPerson"
                  style="width: 100px"
                  @blur="editApproval = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="approvalDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="approvalDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="approvalDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
          <div @dblclick="editReview = true" title="双击修改">
            <label v-if="!editReview"
              ><span>审核：{{ reviewer }}</span>
              <span
                >日期：{{ reviewDate.year }}年{{ reviewDate.month }}月{{
                  reviewDate.day
                }}日</span
              ></label
            >
            <label v-else>
              <span
                >审核：<input
                  type="text"
                  v-model="reviewer"
                  style="width: 100px"
                  @blur="editReview = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="reviewDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="reviewDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="reviewDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
          <div @dblclick="editCompilation = true" title="双击修改">
            <label v-if="!editCompilation"
              ><span>编制：{{ compilationPerson }}</span>
              <span
                >日期：{{ compilationDate.year }}年{{
                  compilationDate.month
                }}月{{ compilationDate.day }}日</span
              ></label
            >
            <label v-else>
              <span
                >编制：<input
                  type="text"
                  v-model="compilationPerson"
                  style="width: 100px"
                  @blur="editCompilation = false"
              /></span>
              <span
                >日期：<input
                  type="text"
                  v-model="compilationDate.year"
                  style="width: 40px"
                />年
                <input
                  type="text"
                  v-model="compilationDate.month"
                  style="width: 40px"
                />月
                <input
                  type="text"
                  v-model="compilationDate.day"
                  style="width: 40px"
                />日</span
              >
            </label>
          </div>
        </div>
      </div>
      <div class="revision-record">
        <h3>修订记录</h3>
        <table border="1">
          <thead>
            <tr>
              <th>版本</th>
              <th>生效日期</th>
              <th>修订内容摘要</th>
              <th>修订部门</th>
              <th>修订人</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>A/1</td>
              <td>2014-03-12</td>
              <td>新增5.1.1.5条款，修订5.2.8条款</td>
              <td>企业管理部</td>
              <td>沈珂琪</td>
            </tr>
            <tr>
              <td>B/0</td>
              <td>2015-01-01</td>
              <td>修订5.2.6条款</td>
              <td>企业管理部</td>
              <td>沈珂琪</td>
            </tr>
            <tr>
              <td>B/1</td>
              <td>2015-08-04</td>
              <td>修订6.1.1《请假核决权限表》</td>
              <td>企业管理部</td>
              <td>姚格</td>
            </tr>
            <tr>
              <td>B/2</td>
              <td>2016-5-1</td>
              <td>修订5.2.5等条款</td>
              <td>企业管理部</td>
              <td>姚格</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="note">使用前请确认是否为最新版本！</p>
    </div>
    <div class="page">
      <div class="content-section">
        <h3>1 目的：</h3>
        <p>为保障公司良好的工作秩序，树立良好的工作作风，特制订本管理办法。</p>
        <h3>2 范围：</h3>
        <p>本管理办法适用于深圳市艾美思普科技有限公司所有人员。</p>
        <h3>3 职责：</h3>
        <p>
          3.1
          企业管理部：负责培训、解释、说明、监督实施与执行本管理规定的具体作业。
        </p>
        <p>3.2 其他各部门：负责对本部门进行培训、监督与配合执行。</p>
        <h3>4 定义：</h3>
        <p>
          4.1
          员工：本办法指专业从事各项操作的在线作业人员，包括特殊岗位人员及其他性质的作业员；
        </p>
        <p>
          4.2
          基层管理：本办法指专业从事基层管理工作、技术工作的人员。分管理职系及技术职系，如下：管理职系包括高级组长、组长、助拉（副组长）、物料员/仓管员、各类领班；技术职系包括电性维修、功能维修、机芯维修、IPQC、FQC（QA）、IQC等；
        </p>
        <p>4.3 职员：A、B、C、D、E级月薪制人员。</p>
        <h3>5 内容：</h3>
        <h4>5.1 休假类别：</h4>
        <h5>5.1.1 员工：</h5>
        <p>
          5.1.1.1
          员工休假分类：国家法定节假日（元旦、春节、清明节、劳动节、端午节、中秋节、国庆节）、工伤假、年假、事假、病假、婚假、丧假。
        </p>
        <p>5.1.1.2 国家法定节假日、工伤假、年假发放基本工资。</p>
        <p>
          5.1.1.3
          员工请事假、停工待料，当月如有加班，其加班工时（平时加班）必须补足基本工时，剩余为加班，以月补足正班；如当月加班工时未能补齐正班工时，次月可不作累计补足。
        </p>
        <p>
          5.1.1.4
          病假、婚假、丧假期间不计发工资，提交相应书面证明者不用平时加班补正班。
        </p>
        <p>5.1.1.5 春节公司放假不用加班补正班。</p>
        <h5>5.1.2 基层：</h5>
        <p>
          5.1.2.1
          基层休假分类：国家法定节假日（元旦、春节、清明节、劳动节、端午节、中秋节、国庆节）、工伤假、年假、事假、病假、婚假、丧假。
        </p>
      </div>
    </div>
    <div class="page">
      <div class="content-section">
        <p>5.1.2.2 国家法定节假日、工伤假、年假发放基本工资。</p>
        <p>5.1.2.3 事假、停工待料、病假、婚假、丧假不计发工资。</p>
        <h5>5.1.3 职员：</h5>
        <p>
          5.1.3.1
          职员休假分类：国家法定节假日（元旦、春节、清明节、劳动节、端午节、中秋节、国庆节）、工伤假、年假、事假、病假、婚假、丧假、产假。
        </p>
        <p>5.1.3.2 国家法定节假日、工伤假、年假发放基本工资。</p>
        <p>5.1.3.3 事假、病假扣除相应工资。</p>
        <p>5.1.3.4 婚假、丧假计发基本工资。</p>
        <p>5.1.3.5 产假批准后按公司制度执行。</p>
        <h4>5.2 休假管理：</h4>
        <p>
          5.2.1
          各类休假，必须以书面形式填写《请假单》逐级审批后，报人资复核后交考勤管理人员进行考勤处理，详见《请假核决权限表》。
        </p>
        <p>
          5.2.2
          凡请假者，必须提前1天将签审批好的《请假单》交到企业管理部人资处备案，备案后才能按请假状况离岗，否则按旷工处理。特殊情况则要求请假者在返厂工作后的第一个工作日内将审批后《请假单》补交到企业管理部人资，否则按旷工处理。
        </p>
        <p>
          5.2.3
          事假：因私事必须本人亲自处理者需请事假，工龄满一年者全年合计不得超过30天，未满一年者按比例给假，但一次性请假原则上不得超过15天（含节假日）。
        </p>
        <p>
          5.2.4
          病假：员工因疾病或生理原因必须治疗休假者，须公司社保绑定社康中心或三级甲等医院出具休假证明，如不能提供者，公司按事假处理。
        </p>
        <p>
          5.2.5
          婚假：可享受连续3天的带薪婚假，休婚假者回公司上班一周内须提供近一个月内的结婚证，如不能提供者，公司按事假处理。
        </p>
        <p>
          5.2.6
          丧假：直系亲属（父母、配偶、子女）死亡，给予连续3天丧假，请丧假者回公司上班一周内须提供火化证明（或相关证明）。如不能提供者，公司按事假处理。
        </p>
        <p>5.2.7 年假：按公司《年假管理规定》实施。</p>
        <p>
          5.2.8
          产假：职员请产假，需在公司服务满2年以上。一胎二胎小孩符合国家规定证件齐全方可向公司申请产假；三胎不享受产假待遇。
        </p>
        <p>
          5.2.8.1
          请产假前须提交结婚证、准生证，以上二证交复印件验原件；以上证件缺一或不符者，则不批准产假。
        </p>
        <p>
          5.2.8.2
          职员上班一周内需提交户口本（户口显示增加小孩户口），出生医学证明。以上二证交复印件验原件。如未提交者，假期按事假处理。
        </p>
        <p>
          5.2.8.3
          职员上班需出勤满一个月后，发放产假工资。产假工资为基本工资的80%。
        </p>
      </div>
    </div>
    <div class="page">
      <div class="content-section">
        <p>
          5.2.8.4
          职员因证件不齐或者产假未批准，请假后返岗上班，缺勤类别按事假处理。
        </p>
        <p>
          5.2.8.5
          职员请产假期间，产假未休完提前上班者，提前上班时间按正常出勤，公司不额外支付薪资。
        </p>
        <p>
          5.2.9
          在执行本管理规定过程中如遇与相关文件有冲突的地方，则以此份文件内容为准。
        </p>
      </div>
      <div class="attachments-section">
        <h3>6 附件、相关文件及表单：</h3>
        <p>6.1 相关附件：</p>
        <p>6.1.1 《请假核决权限表》</p>
        <p>6.2 相关文件：</p>
        <p>6.2.1 《年假管理规定》</p>
        <p>6.3 相关表单：</p>
        <p>6.3.1 《请假单》</p>
      </div>
    </div>
    <div class="page">
      <div class="approval-table-section">
        <h3 style="text-align: center">请假核决权限表</h3>
        <table border="1">
          <thead>
            <tr>
              <th rowspan="2">职位</th>
              <th rowspan="2">期限</th>
              <th colspan="7">审批流程</th>
            </tr>
            <tr>
              <th>请假人</th>
              <th>组长</th>
              <th>主管</th>
              <th>经理</th>
              <th>总监</th>
              <th>事业部部长</th>
              <th>总经理/总<br />裁/董事长</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td rowspan="2">组长以下人员</td>
              <td>1天以内</td>
              <td>○</td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>1-3天</td>
              <td>○</td>
              <td>◎</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td>3天以上</td>
              <td>○</td>
              <td>◎</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="2">组长级请假</td>
              <td>1天以内</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>●</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>1-3天</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td>3天以上</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="3">E级职员</td>
              <td>1天以内</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>●</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>1-2天</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>2天以上</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="3">D级职员</td>
              <td>1天以内</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>●</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>1-2天</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>2天以上</td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td rowspan="2">C级职员</td>
              <td>3天以内</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td></td>
              <td>◎</td>
              <td>●</td>
              <td></td>
            </tr>
            <tr>
              <td>3天以上</td>
              <td>○</td>
              <td></td>
              <td></td>
              <td></td>
              <td>◎</td>
              <td>⊙</td>
              <td>●</td>
            </tr>
            <tr>
              <td>B级职员</td>
              <td></td>
              <td>○</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>●</td>
            </tr>
            <tr>
              <td>职员请产假</td>
              <td></td>
              <td>○</td>
              <td></td>
              <td>◎</td>
              <td>◎</td>
              <td>⊙</td>
              <td>⊙</td>
              <td>●</td>
            </tr>
          </tbody>
        </table>
        <p>说明：○—请假人申请 ◎—审核 　⊙—复核 ●—批准</p>
      </div>
    </div>
  </div>
</template>

            <!-- <p>文件编号：WI-A-JY-20</p>
            <p>文件版本：B/2</p>
            <p>编制部门：企业管理部</p>
            <p>生效日期：2016-05-01</p>
            <p>批准：顾学树</p>
            <p>审核：张丽蓉</p>
            <p>编制：姚格</p>
            <p>日期：2016年4月20日、2016年4月20日、2016年4月15日</p> -->
<script>
export default {
  data() {
    return {
      meta: {
        fileNumber: "AM-A-JY-20",
        version: "B/2",
        department: "企业管理部",
        effectiveDate: "2016-05-01",
      },
      approvalPerson: "顾学树", //批准
      reviewer: "张丽荣", //审核
      compilationPerson: "姚格", //编制
      approvalDate: { year: "2016", month: "4", day: "20" },
      reviewDate: { year: "2016", month: "4", day: "20" },
      compilationDate: { year: "2016", month: "4", day: "15" },
      company: "深圳市艾美思普科技有限公司",

      editMeta: false,
      editApproval: false,
      editReview: false,
      editCompilation: false,
    };
  },
  methods: {
    printForm() {
      window.print();
    },
  },
};
</script>

<style scoped>
.hr-config-planning-container {
  max-width: 210mm;
  margin: 0px auto;
  padding: 20px;
  border-radius: 10px;
  font-family: "宋体";
  text-align: left;
  min-height: 100vh;
}

.page {
  width: 210mm;
  height: 297mm;
  padding: 15mm;
  border: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  page-break-after: always;
  text-align: left;
  line-height: 29.3326px;
  letter-spacing: 0.1039em;
  margin-top: 20px;
}

.company-name {
  text-align: center;
  font-size: 24px;
  color: #333;
  /* margin-bottom: 10px; */
}

.title {
  text-align: center;
  font-size: 20px;
  color: #007bff;
  /* margin-bottom: 20px; */
}

.meta-info {
  margin-bottom: 20px;
  line-height: 2em;
  text-align: center;
}

.revision-record {
  margin-bottom: 20px;
}

.revision-record h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.revision-record table {
  width: 100%;
  border-collapse: collapse;
}

.revision-record table th,
.revision-record table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.note {
  margin-bottom: 20px;
  color: #f37e7e;
  font-size: 1.3em;
  text-align: center;
}

.content-section h3,
.attachments-section h3,
.approval-table-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.content-section p,
.attachments-section p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.content-section h4 {
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  margin-bottom: 10px;
}

.content-section h5 {
  font-size: 14px;
  color: #333;
  margin-top: 10px;
  margin-bottom: 5px;
}

.attachments-section {
  margin-bottom: 20px;
}

.approval-table-section {
  margin-bottom: 20px;
}

.approval-table-section table {
  width: 100%;
  border-collapse: collapse;
}

.approval-table-section table th,
.approval-table-section table td {
  border: 1px solid #ddd;
  padding: 3px;
  text-align: center;
}

.approval-table-section p {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
label {
  display: flex;
  flex-direction: column;
}
.print-btn {
  display: flex;
  justify-content: space-between;
}

@media print {
  .hr-planning-container {
    width: 100%;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .page {
    box-shadow: none;
    border: none;
  }

  .print-btn {
    display: none;
  }

  body {
    font-family: "宋体";
  }
}
</style>